import React , { useState , useRef , memo } from 'react';

const Input = ({add}) => {
    const [value,setValue] = useState('');

    return <div>
        <input value={value} onChange={(e) => setValue(e.target.value)} type="text"/>
        <button onClick={()=>add(value)}>添加</button>
    </div>
}

export default memo(Input);


//非受控组件形式
//获取真实的dom节点
// const inputEle = useRef();
// const add = () => {
//     console.log(inputEle);
// }
// return <div>
//     <Header />
//     <input ref={inputEle} type="text"/>
//     <button onClick={add}>添加</button>
// </div>